<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.css" rel="stylesheet" />
		<link href="../css/main.css" rel="stylesheet" />
		<!-- 引入阿里巴巴矢量图标 -->
		<script src="../js/iconfont.js" type="text/javascript"></script>
		<!-- 阿里巴巴矢量图标专用css样式 -->
		<style type="text/css">
			.icon {
				width: 1em;
				height: 1em;
				vertical-align: -0.15em;
				fill: currentColor;
				overflow: hidden;
				/* 设置图标大小 */
				font-size: 32px;
			}
		</style>
	</head>

	<body>
		<!-- 头部 mhea -->
		<header class="mui-bar mui-bar-nav">
			<!-- 搜索框 -->
			<div class="mui-input-row mui-pull-left mui-search">
				<input type="search" class="mui-input-clear" placeholder="请输入搜索内容" style="background: white"
					onfocus="this.style.color='gray'">
			</div>
			<span class="mui-pull-right">预约</span>
		</header>
		<!-- 主体 mbody -->
		<div class="mui-content">
			<!-- 轮播图 msl mGallery -->
			<div id="slider" class="mui-slider">
				<div class="mui-slider-group mui-slider-loop">
					<!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
					<div class="mui-slider-item mui-slider-item-duplicate">
						<a href="#">
							<img src="../images/lb4.jpg">
						</a>
					</div>
					<!-- 第一张 -->
					<div class="mui-slider-item">
						<a href="#">
							<img src="../images/lb1.jpg">
						</a>
					</div>
					<!-- 第二张 -->
					<div class="mui-slider-item">
						<a href="#">
							<img src="../images/lb2.jpg">
						</a>
					</div>
					<!-- 第三张 -->
					<div class="mui-slider-item">
						<a href="#">
							<img src="../images/lb3.jpg">
						</a>
					</div>
					<!-- 第四张 -->
					<div class="mui-slider-item">
						<a href="#">
							<img src="../images/lb4.jpg">
						</a>
					</div>
					<!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
					<div class="mui-slider-item mui-slider-item-duplicate">
						<a href="#">
							<img src="../images/lb1.jpg">
						</a>
					</div>
				</div>
				<!-- 轮播图存放位置 每增加一张轮播图就复制一行 -->
				<div class="mui-slider-indicator">
					<div class="mui-indicator mui-active"></div>
					<div class="mui-indicator"></div>
					<div class="mui-indicator"></div>
					<div class="mui-indicator"></div>
				</div>
			</div>

			<!-- 九宫格 mgr -->
			<ul id="grid" class="mui-table-view mui-grid-view mui-grid-9">
				<!-- 一行共 12 -->
				<!-- mui-col-sm-表示大屏(≥400px)设备上显示,而.mui-col-xs-在小屏(＜400px)设备上显示 -->
				<li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
					<a href="#">
						<span class="mui-icon">
							<svg class="icon" aria-hidden="true">
								<use xlink:href="#icon-xiangji"></use>
							</svg>
						</span>
						<div class="mui-media-body">婚纱拍摄</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
					<a href="#">
						<span class="mui-icon">
							<svg class="icon" aria-hidden="true">
								<use xlink:href="#icon-feiji"></use>
							</svg>
							<span class="mui-badge mui-badge-red">5</span>
						</span>
						<div class="mui-media-body">全球旅拍</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
					<a href="#">
						<span class="mui-icon">
							<svg class="icon" aria-hidden="true">
								<use xlink:href="#icon-jiubei"></use>
							</svg>
						</span>
						<div class="mui-media-body">婚宴酒店</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
					<a href="#">
						<span class="mui-icon">
							<svg class="icon" aria-hidden="true">
								<use xlink:href="#icon-xinniantubiao-shangchuantubiaoku-"></use>
							</svg>
						</span>
						<div class="mui-media-body">婚礼服务</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
					<a href="#">
						<span class="mui-icon">
							<svg class="icon" aria-hidden="true">
								<use xlink:href="#icon-fengche"></use>
							</svg>
						</span>
						<div class="mui-media-body">Search</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
					<a href="#">
						<span class="mui-icon">
							<svg class="icon" aria-hidden="true">
								<use xlink:href="#icon-shu"></use>
							</svg>
						</span>
						<div class="mui-media-body">Phone</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
					<a href="#">
						<span class="mui-icon">
							<svg class="icon" aria-hidden="true">
								<use xlink:href="#icon-kechengguwen"></use>
							</svg>
						</span>
						<div class="mui-media-body">婚礼顾问</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
					<a href="#">
						<span class="mui-icon">
							<svg class="icon" aria-hidden="true">
								<use xlink:href="#icon-rencaiduijie"></use>
							</svg>
						</span>
						<div class="mui-media-body">新人说</div>
					</a>
				</li>
			</ul>

			<!-- 婚纱拍摄 -->
			<div id="paishe">
				<div>
					<span style="background-color: red;">&nbsp;&nbsp;</span>
					<span class="hs">婚纱拍摄</span>
					<span class="more">
						<a href="https://www.baidu.com">更多&gt;</a>
					</span>
				</div>
				<!-- 九宫格 -->
				<ul class="mui-table-view mui-grid-view mui-grid-9">
					<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
						<a href="#">
							<img src="../images/gg1.jpg" width="100%" />
							<div class="mui-media-body">私奔到海</div>
						</a>
					</li>
					<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
						<a href="#">
							<img src="../images/gg2.jpg" width="100%" />
							<div class="mui-media-body">城市热恋</div>
						</a>
					</li>
					<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
						<a href="#">
							<img src="../images/gg3.jpg" width="100%" />
							<div class="mui-media-body">浪漫花海</div>
						</a>
					</li>
				</ul>
			</div>

			<!-- 酒店婚宴 -->
			<div id="hunyan">
				<div>
					<span style="background-color: red;">&nbsp;&nbsp;</span>
					<span class="hs">酒店婚宴</span>
					<span class="more">
						<a href="https://www.baidu.com">更多&gt;</a>
					</span>
				</div>
				<!-- 图文列表 mli -->
				<ul class="mui-table-view">
					<li class="mui-table-view-cell mui-media">
						<a href="javascript:;">
							<img class="mui-media-object mui-pull-left" src="../images/list1.jpg">
							<div class="mui-media-body">
								<P class="hotel_title">【巴厘岛】乌干杀悦榕庄酒店 白羽教堂</P>
								<P class="hotel_font">周一到周日 | 提前3天预约</P>
								<P class="hotel_font">
									<span class="after_price">￥42888</span>
									<span class="before_price">门店价：￥428888.0</span>
									<span class="sale_num">售出：9</span>
								</P>
							</div>
						</a>
					</li>
					<li class="mui-table-view-cell mui-media">
						<a href="javascript:;">
							<img class="mui-media-object mui-pull-left" src="../images/list2.jpg">
							<div class="mui-media-body">
								<P class="hotel_title">【巴厘岛】乌干杀悦榕庄酒店 白羽教堂</P>
								<P class="hotel_font">周一到周日 | 提前3天预约</P>
								<P class="hotel_font">
									<span class="after_price">￥42888</span>
									<span class="before_price">门店价：￥428888.0</span>
									<span class="sale_num">售出：14</span>
								</P>
							</div>
						</a>
					</li>
					<li class="mui-table-view-cell mui-media">
						<a href="javascript:;">
							<img class="mui-media-object mui-pull-left" src="../images/list3.jpg">
							<div class="mui-media-body">
								<P class="hotel_title">【巴厘岛】乌干杀悦榕庄酒店 白羽教堂</P>
								<P class="hotel_font">周一到周日 | 提前3天预约</P>
								<P class="hotel_font">
									<span class="after_price">￥42888</span>
									<span class="before_price">门店价：￥428888.0</span>
									<span class="sale_num">售出：7</span>
								</P>
							</div>
						</a>
					</li>
					<li class="mui-table-view-cell mui-media">
						<a href="javascript:;">
							<img class="mui-media-object mui-pull-left" src="../images/list4.jpg">
							<div class="mui-media-body">
								<P class="hotel_title">【巴厘岛】乌干杀悦榕庄酒店 白羽教堂</P>
								<P class="hotel_font">周一到周日 | 提前3天预约</P>
								<P class="hotel_font">
									<span class="after_price">￥42888</span>
									<span class="before_price">门店价：￥428888.0</span>
									<span class="sale_num">售出：8</span>
								</P>
							</div>
						</a>
					</li>
					<li class="mui-table-view-cell mui-media">
						<a href="javascript:;">
							<img class="mui-media-object mui-pull-left" src="../images/list5.jpg">
							<div class="mui-media-body">
								<P class="hotel_title">【巴厘岛】乌干杀悦榕庄酒店 白羽教堂</P>
								<P class="hotel_font">周一到周日 | 提前3天预约</P>
								<P class="hotel_font">
									<span class="after_price">￥42888</span>
									<span class="before_price">门店价：￥428888.0</span>
									<span class="sale_num">售出：3</span>
								</P>
							</div>
						</a>
					</li>
				</ul>
			</div>
			
		</div>

		<!-- 引入外部js文件 -->
		<script src="../js/mui.js"></script>
		<!-- 内嵌js -->
		<script type="text/javascript">
			mui.init()
			// 获取当前文档中轮播图组件对象
			var sliderObj = mui("#slider");
			sliderObj.slider({
				// 设定轮播图切换时间(以毫秒为单位)
				interval: 1000
			})
		</script>
	</body>

</html>